<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21号笔记</title>
</head>
<body>
<p>
    <style>
        .main {
            width: 100px;
            height: 50px;
            /*box-shadow: 150px 100px 2px black;*/

            /*滤镜的阴影：将内容投射出来，而不是将一整个盒子*/
            filter: drop-shadow(100px 50px 1px black);
        }
    </style>
    <body>
    <div class="main">
        这是一个盒子，我要阴影
    </div>


    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius:50% ;/*radius半径，把边框变成原型*/
            box-shadow: inset -5px -5px 3px black,
            5px -5px 3px black;/*box-shadow盒子阴影*/
        }
    </style>
    <body>
    <div class="circle"></div>


    <style>
        table {
            /*table-layout（布局，设计）: 表格样式;*/
            /*fixed固定*/
            /*使用fixed根据表格宽度去固定，*/
            table-layout: fixed;/*表格样式默认是auto（自动）*/
            width: 150px;

            /*边框合并只有一条，cellspacing用来决定表格的边框是分开还是合并，在分隔模式下，相邻的单元格拥有
            独立的边框，在合并模式下，相邻单元格共享边框*/
            /*表格默认separated边框分隔*/
            /*border-collapse: collapse ;*/
            border-collapse: inherit;/*继承默认的*/
            /*如果使用边框合并的话border-spacing这个就无效了*/
            border-spacing: 10px;/*spacing每个单元格间隙10像素*/
        }
        table td {
            /*nowrap禁止文字自动换行*/
            white-space: nowrap;

            /*overflow超出部分样式，hidden隐藏*/
            overflow: hidden;

            /*text-overflow文本超出部分样式， ellipsis省略号代替*/
            text-overflow: ellipsis;

        }

        /*table下的thead下的th，选择nth-of-type(这几个)*/
        /*table thead th:nth-of-type(1) {*/
        /*    width: 90px;*/
        /*}*/

    </style>
    <body>

    <!--cellspacing单元格之间的间隙-->
    <table border="1" cellspacing="0">
        <!--    thead表头-->
        <thead>
        <tr>
            <th>时间</th>
            <th>待办</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2020-09-21</td>
            <td>吃饭</td>
        </tr>
        <tr>
            <td>2020-09-22</td>
            <td>睡觉</td>
        </tr>
        </tbody>
    </table>
    </body>


    <style>
        p {
            /*X轴偏移 ，Y轴偏移  模糊半径  颜色*/
            text-shadow: 10px 20px 2px rgba(123,212,90,.5),
            20px 30px 2px rgba(65, 212, 19, 0.5);
            width: 150px;
            height: 100px;
            border: 1px solid #95ff68;

            /*X轴偏移 ，Y轴偏移  模糊半径  颜色*/
            /*box-shadow: 5px 5px 10px rgb(0,0,0),*/
            /*3px 3px 5px rgb(0,0,0),*/
            /*inset内部申明*/ box-shadow: inset -5px -5px 5px rgb(0,0,0);/*盒阴影*/
        }
    </style>
    <body>
<p>hello world</p>
</body>
</p>
</body>
</html>